<template>
  <div>
    <el-form :model="obj.value" label-width="120px" ref="ruleFormRef" :rules="rules"
>
      <el-form-item label="分类" prop="label_class_id">
        <el-select
          v-model="obj.value.label_class_id"
          class="m-2"
          placeholder="分类"
        >
          <el-option
            v-for="item in labellist.value"
            :key="item.id"
            :label="item.class_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单位所在地区" prop="country">
        <el-select
          v-model="obj.value.country"
          class="m-2"
          placeholder="单位所在地区"
        >
          <el-option label="国内" value="国内"/>
          <el-option label="国外" value="国外"/>
        </el-select>
      </el-form-item>
      <el-form-item label="地区"  prop="area"> 
        <el-input v-model="obj.value.area" />
      </el-form-item>
      <el-form-item label="名称"  prop="name">
        <el-input v-model="obj.value.name" />
      </el-form-item>
      <el-form-item label="法人">
        <el-input v-model="obj.value.legal_representative" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="obj.value.contacts" />
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="obj.value.duties" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="obj.value.telephone" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="obj.value.e_mail" />
      </el-form-item>
     
      <el-form-item label="内容" v-for="(item,index) in obj.value.content" :key="item">
         <div style="display: block;width: 100%;"> <el-input v-model="item.title" /></div>
        <div style="display: block;width: 800px;margin-top: 20px;position: relative;">
          <wange @issuevalue="getHtml" :index="index"></wange>
          <span style="position: absolute;top: 0; right: -50px;font-size: 20px;cursor: pointer;" @click="delconteng(index)">   <el-icon :size="20">
    <Delete />
  </el-icon></span>
        </div>

      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="addcontent">新增内容</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref } from "vue";
import { labelClassLists ,labelAdd} from "../../api/api";
import {Delete} from "@element-plus/icons-vue"
import wange from "./wangeditor.vue"
import { useRoute, useRouter } from "vue-router";
let $route = useRoute()
let $router = useRouter()
let ruleFormRef = ref()
let obj = reactive({
  value: {
    label_class_id: "", //分类
    area: "", //地区
    name: "", //名称
    legal_representative: "", //法人
    contacts: "", //联系人
    telephone: "", //手机号
    e_mail: "", //邮箱
    duties: "",//职位
    country:'',//单位所在地区
    content:[]
  },
});




const rules = reactive({
  label_class_id: [
    { required: true, message: '请选择分类', trigger: 'change' },
  ],
  country: [
    { required: true, message: "请选择", trigger: "change" },
  ],
  area: [
    { required: true, message: '请输入地区', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入标题', trigger: 'blur' },
  ],

  })
  
//-------------------------------------------获取分类
let labellist = reactive({value:[]});
const getclass_label = () => {
  labelClassLists({}).then((res) => {
    labellist.value = res.data;
  });
};
getclass_label();
//-------------------------------------------获取分类


//-------------------------------------------获取地区
let arealist = reactive({value:[]});
const getarea = () => {
  labelClassLists({}).then((res) => {
    arealist.value = res.data;
  });
};
getarea();
//-------------------------------------------获取地区

//-------------------------------------------新增内容

  const addcontent = ()=>{
    obj.value.content.push({title:'',text:''})
  }

  const delconteng = (index:number)=>{
    obj.value.content.splice(index,1)
  }
//-------------------------------------------end新增内容

//-------------------------------------------获取html

const getHtml = (value:any)=>{
    obj.value.content[value.index].text = value.html
  }

//-------------------------------------------end获取html

//-------------------------------------------保存内容




  const submit = async (formEl:any) => {
  if (!formEl) return
  await formEl.validate((valid:any, fields:any) => {
    if (valid) {
      let jsonobj:any = {...obj.value,school_id:$route.query.schoolId}
      jsonobj = JSON.stringify(jsonobj)
      labelAdd(jsonobj).then(res=>{
        window.location.href=`https://arts.edtzk.com/admin/school/labelLists?id=${$route.query.schoolId}`;
   })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//-------------------------------------------end保存内容
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 400px;
}
</style>
